<template>
	<div class="root">
		 <my-header htitle="线切" :date="date"></my-header>
		 <count-info :waitMatTotal="waitMatTotal"
    	             :makeMatTotal="makeMatTotal"
    	             :finishedDayCount="finishedDayCount"
    	             :finishedMonthCount="finishedMonthCount"
    	             :outboundDay="outboundDay"
    	             :damageDay="damageDay" ></count-info>

    	  <div class="content">
    	  	    <div class="con-left-group">
    	  	    	<isqualified :list="isqualifiedList"></isqualified>
                    <div class="h28"></div>
    	  	    	<plan :list="planList"></plan>
                    <div class="h28"></div>
    	  	    	<notice noticeTitle="反馈通知"></notice>
                    <div class="h22"></div>
    	  	    	<printing-words :list="printingWordsList"></printing-words>
    	  	    </div>
    	  	    <div class="con-right-group">
    	  	    	 <div class="finish-abnormal">
    	  	    	 	 <finished :list="finishedList"></finished>
    	  	    	 	 <div class="abnormal-group">
    	  	    	 	 	  <notice noticeTitle="异常信息"></notice>
                              <div class="h18"></div>
                              <abnormal :list="abnormalList"></abnormal>
    	  	    	 	 </div> 
    	  	    	 </div>

    	  	    	 <notice noticeTitle="超时告警"></notice>
                     <div class="h18"></div>
    	  	    	 <stagnation :list="stagnationList" :abnormalInfo="abnormalInfo"></stagnation>
    	  	    </div>
    	  </div>           
	</div>
</template>

<script>
import MyHeader from '@/components/Header'
import CountInfo from './components/CountInfo'
import Isqualified from '@/components/Isqualified'
import Plan from '@/components/Plan'
import Notice from '@/components/Notice'
import PrintingWords from './components/PrintingWords'
import Finished from './components/Finished'
import Abnormal from './components/Abnormal'
import Stagnation from '@/components/Stagnation'

import {getXianQie,getXianQiePlan,getxqFeedback} from "../../api/chart"


export default{
	components:{
		MyHeader,
		CountInfo,
		Isqualified,
		Plan,
        Notice,
        PrintingWords,
        Finished,
        Abnormal,
        Stagnation
	},
	data () {
		return{
            date:'',
		    waitMatTotal:'',
	    	makeMatTotal:'',
	    	finishedDayCount:'',
	    	finishedMonthCount:'',
	    	outboundDay:'',
	    	damageDay:'',
	    	abnormalInfo:'',
	    	isqualifiedList:[],
	    	planList:{},
	    	printingWordsList:[],
	    	finishedList:[],
	    	abnormalList:[],
	    	stagnationList:[]

		}
	},
	methods:{
        getCountInfo () {
            getXianQie().then((data)=>{
                this.date = data.date
                this.waitMatTotal = data.wireWait
                this.makeMatTotal = data.wireHand
                this.finishedDayCount = data.wireCount
                this.finishedMonthCount = data.monthWireCount
                this.outboundDay = data.unloadWait
                // this.damageDay = data
            }).catch((error) => {
                console.log(error)
            })

            getXianQiePlan().then((data) => {
                this.planList = data.msg
            }).catch((error) => {
                 console.log(error)
            })

            getxqFeedback().then((data)=>{
                this.printingWordsList = data.feedbacks  
            }).catch((error) => {
                 console.log(error)
            })
        }

    },
    mounted () {
        clearTimeout(timer)
        this.getCountInfo()
        var timer = setInterval(()=>{
            this.getCountInfo()
        },10000)
    }

}
</script>

<style  scoped>
.root{
    background:#383A53;
    width:1920px;
    height:1080px;
}

.content{
    width:100%;
    box-sizing:border-box;
    padding-left:30px;
    padding-right:30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.con-left-group,.con-right-group{
    width:914px;
    height:800px;
}

.finish-abnormal{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    height:527px;
    overflow:hidden;
}

.abnormal-group{
    width:620px;

}

.h28{
    width:100%;
    height:28px;
}

.h22{
    width:100%;
    height:22px;
}
   
.h18{
    width:100%;
    height:18px; 
}
                             
</style>